<template>
  <!-- 音量条 -->
  <div class="player-video-volumebar-wrap">
    <div class="player-video-volume-num">{{ volume }}</div>
    <!-- 音量条总高度 -->
    <div class="player-video-volumebar" @mousedown="startAdjustVolume">
      <div class="bui-track">
        <div class="bui-bar-wrap" ref="volumeBarWrap">
          <!-- 当前音量 -->
          <div
            class="bui-bar"
            role="progressbar"
            :style="{ transform: `scaleY(${volumePercentage})` }"
          ></div>
        </div>
        <!-- 音量图标小球 -->
        <div
          class="bui-thumb"
          :style="{ bottom: `${volumePercentage * 100}%` }"
        >
          <div id="volume_dot" class="bui-thumb-dot"></div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script setup>
import { ref, computed } from "vue";

const volume = ref(80); // 初始音量
const volumeBarWrap = ref(null);

const volumePercentage = computed(() => {
  return (volume.value / 100) * 0.8; //乘以0.8
});

const startAdjustVolume = (event) => {
  const adjustVolume = (e) => {
    const rect = volumeBarWrap.value.getBoundingClientRect();
    const mouseY = e.clientY;
    const relativeY = mouseY - rect.top;
    const volumeHeight = rect.height;
    let newVolume = (volumeHeight - relativeY) / volumeHeight;
    newVolume = Math.min(1, Math.max(0, newVolume));
    volume.value = Math.round(newVolume * 100);
  };

  const stopAdjustVolume = () => {
    document.removeEventListener("mousemove", adjustVolume);
    document.removeEventListener("mouseup", stopAdjustVolume);
  };

  adjustVolume(event);
  document.addEventListener("mousemove", adjustVolume);
  document.addEventListener("mouseup", stopAdjustVolume);
};
</script>
<style lang="scss" scoped>
/* 音量条 */
.player-video-volumebar-wrap {
  position: relative;
  text-align: center;
  width: 32px;
  height: 100px;
  background: rgba(21, 21, 21, 0.9);
  border-radius: 2px;
  cursor: pointer;

  .player-video-volume-num {
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: #e7e7e7;
    user-select: none;
  }

  .player-video-volumebar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 60px;

    .bui-track {
      position: relative;
      width: 3px;
      height: 100%;

      //显示音量的外层容器
      .bui-bar-wrap {
        position: absolute;
        width: 2px;
        height: 100%;
        border-radius: 1.5px;
        background: #e7e7e7;
        bottom: 0;

        //显示当前音量条
        .bui-bar {
          position: absolute;
          -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
          top: 0;
          left: 0;
          right: 0;
          width: 2px;
          height: 100%; // 明确设置高度，使其可以被正确缩放
          background: #00a1d6;
        }
      }

      //音量球
      .bui-thumb {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #00a1d6;
        display: flex;
        align-items: center;
        justify-content: center;

        .bui-thumb-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #00a1d6;
        }
      }
    }
  }
}
</style>
  